<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="title"
  [loading]="isLoading()"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
      <div class="columns">
        <div class="column">
          <ix-fieldset [title]="helptext.fieldsetExtentBasic | translate">
            <ix-input
              formControlName="name"
              [label]="helptext.extent.nameLabel | translate"
              [tooltip]="helptext.extent.nameTooltip | translate"
              [placeholder]="helptext.extent.nameLabel | translate"
              [required]="true"
            ></ix-input>

            <ix-input
              formControlName="comment"
              [label]="helptext.extent.commentLabel | translate"
              [placeholder]="helptext.extent.commentLabel | translate"
            ></ix-input>

            <ix-checkbox
              formControlName="enabled"
              [label]="helptext.extent.enabledLabel | translate"
              [tooltip]="helptext.extent.enabledTooltip | translate"
            ></ix-checkbox>
          </ix-fieldset>
          <ix-fieldset [title]="helptext.fieldsetExtentOptions | translate">
            <ix-checkbox
              formControlName="insecure_tpc"
              [label]="helptext.extent.tpcLabel | translate"
              [tooltip]="helptext.extent.tpcTooltip | translate"
            ></ix-checkbox>

            <ix-checkbox
              formControlName="xen"
              [label]="helptext.extent.xenLabel | translate"
              [tooltip]="helptext.extent.xenTooltip | translate"
            ></ix-checkbox>

            <ix-select
              formControlName="rpm"
              [label]="helptext.extent.rpmLabel | translate"
              [options]="rpms$"
              [tooltip]="helptext.extent.rpmTooltip | translate"
              [required]="true"
            ></ix-select>

            <ix-checkbox
              formControlName="ro"
              [label]="helptext.extent.readOnlyLabel | translate"
              [tooltip]="helptext.extent.readOnlyTooltip | translate"
            ></ix-checkbox>
          </ix-fieldset>
        </div>

        <div class="column">
          <ix-fieldset [title]="helptext.fieldsetExtentType | translate">
            <ix-select
              formControlName="type"
              [label]="helptext.extent.typeLabel | translate"
              [options]="types$ | translateOptions"
              [tooltip]="helptext.extent.typeTooltip | translate"
              [required]="true"
            ></ix-select>

            @if (isDevice) {
              <ix-select
                formControlName="disk"
                [label]="helptext.extent.deviceLabel | translate"
                [options]="disks$"
                [tooltip]="helptext.extent.deviceTooltip | translate"
                [required]="true"
              ></ix-select>
            } @else {
              <ix-explorer
                formControlName="path"
                [nodeProvider]="treeNodeProvider"
                [label]="helptext.extent.pathLabel | translate"
                [tooltip]="helptext.extent.pathTooltip | translate"
                [required]="true"
                [canCreateDataset]="isNew"
              ></ix-explorer>

              <ix-input
                formControlName="filesize"
                [label]="helptext.extent.filesizeLabel | translate"
                [tooltip]="helptext.extent.filesizeTooltip | translate"
                [placeholder]="helptext.extent.filesizeLabel | translate"
                [required]="true"
                [parse]="formatter.memorySizeParsing"
                [format]="formatter.memorySizeFormatting"
              ></ix-input>
            }

            @if (!isNew) {
              <ix-input
                formControlName="serial"
                [label]="helptext.extent.serialLabel | translate"
                [tooltip]="helptext.extent.serialTooltip | translate"
                [placeholder]="helptext.extent.serialLabel | translate"
              ></ix-input>
            }

            <ix-select
              formControlName="blocksize"
              [label]="helptext.extent.blocksizeLabel | translate"
              [options]="blocksizes$"
              [tooltip]="helptext.extent.blocksizeTooltip | translate"
              [required]="true"
            ></ix-select>

            <ix-checkbox
              formControlName="pblocksize"
              [label]="helptext.extent.disablePhysicalBlockSizeLabel | translate"
              [tooltip]="helptext.extent.disablePhysicalBlockSizeTooltip | translate"
            ></ix-checkbox>

            @if (isAvailableThreshold) {
              <ix-input
                formControlName="avail_threshold"
                type="number"
                [label]="helptext.extent.thresholdLabel | translate"
                [tooltip]="helptext.extent.thresholdTooltip | translate"
                [placeholder]="helptext.extent.thresholdLabel | translate"
              ></ix-input>
            }
          </ix-fieldset>
        </div>
      </div>

      <ix-form-actions>
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="form.invalid || isLoading()"
        >
          {{ 'Save' | translate }}
        </button>
      </ix-form-actions>
    </form>
  </mat-card-content>
</mat-card>
